<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div
        class="teset"
        v-bind:class="[isActive?'active':'',isGreen?'green':'']"
        style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
        hi vue
        </div>
        <div
        :style="{color:color,fontSize:size,background:isRrd?'#FF0000':''}">
        hi vue
        </div>
    </div>
   
    <script type="text/javascript">
    var vm =new Vue({
        el:"#app",
        data:{
            isActive:true,
            isGreen:false,
            color:"#FFFFFF",
            size:'50px',
            isRrd:true
        }
    });
    </script>
    <style>
    .test{font-size:30px;}
    .green{color: #00ff00;}
    .active{background: #ff0000;}
    </style>
</body>

</html>